@mixin display-grid {
	display: -ms-grid;
	display: grid;
}
@mixin grid-template-columns( $cols, $gap, $fr ) {
	-ms-grid-columns: $fr $gap $fr $gap $fr $gap $fr $gap $fr $gap $fr $gap $fr $gap $fr $gap $fr $gap $fr $gap $fr $gap $fr;
	grid-template-columns: repeat( $cols, [col-start] minmax( 0, $fr ) );
	grid-column-gap: $gap;
}
@mixin grid-row( $row-start, $span ) {
	-ms-grid-row: $row-start;
	-ms-grid-row-span: $span;
		grid-row: $row-start / span $span;
}
@mixin grid-column( $col-start, $span ) {
	-ms-grid-column: $col-start * 2 - 1;
	-ms-grid-column-span: $span + ($span - 1);
		grid-column: $col-start / span $span;
}

.customer-home {
	&__main {
		@include breakpoint( '>1040px' ) {
			@include display-grid;
			@include grid-template-columns( 12, 24px, 1fr );
		}
	}

	&__welcome-banner {
		@include breakpoint( '>1040px' ) {
			@include display-grid;
			@include grid-template-columns( 12, 24px, 1fr );
			padding: 0;
		}

		img {
			margin: 0 33%;
			@include breakpoint( '>1040px' ) {
				@include grid-column( 2, 2 );
				margin: 0;
				padding: 24px 0;
			}

		}

		div {
			@include breakpoint( '>1040px' ) {
				@include grid-column( 5, 8 );
				padding: 24px 24px 24px 0;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.card-heading {
					margin-top: 0;
				}
			}

			p {
				margin-bottom: 0;
			}
		}
	}

	&__upsells {
		@include grid-column( 1, 12 );
	}

	&__main .banner.card {
		@include grid-column( 1, 12 );
		@include grid-row( 2, 1 );
		margin-left: 0;
		margin-right: 0;
	}

	&__page-heading {
		@include grid-row( 1, 1 );
		@include breakpoint( '>1040px' ) {
			@include grid-column( 1, 12 );
			margin: 0;
		}
	}
	&__confetti {
		display: block;
		width: 320px;
		margin: 0 auto;
	}

	&__heading {
		display: flex;
		@include breakpoint( '<660px' ) {
			margin: 1.5em 16px 0;
		}

		.formatted-header {
			margin: 0;
			margin-right: 12px;
		}

		.customer-home__view-site-button {
			margin: auto;
			margin-right: 0;

			.button {
				text-align: center;
				white-space: nowrap;
			}
		}
	}
	&__launch-button {
		& .button {
			font-size: 18px;
			width: 100%;
			height: 50px;
		}
	}
	&__launch-card,
	&__migrate-card {
		display: flex;
		padding: 12px 16px;

		.customer-home__launch-fireworks,
		.customer-home__migrate-fireworks {
			margin-right: 18px;
			width: 100px;

			@include breakpoint( '<480px' ) {
				display: none;
			}
		}

		.customer-home__launch-card-text,
		.customer-home__migrate-card-text {
			margin: auto 0;

			.card-heading {
				margin: 0;
			}
		}

		.customer-home__launch-card-subtext,
		.customer-home__migrate-card-subtext {
			margin: 0;
			font-size: 14px;
		}
	}

	&__box-action {
		margin-bottom: 16px;
		width: 100%;

		@include breakpoint( '>480px' ) {
			width: 48%;
			margin-bottom: 24px;
		}

		.button {
			border-width: 1px;
			display: flex;
			height: 100%;
			min-width: 100%;
			padding: 16px;
			text-align: center;

			@include breakpoint( '>480px' ) {
				display: block;
				min-height: 85px;
				padding: 24px;
			}
		}
		.button:hover {
			box-shadow: 0 2px 3px 0 rgba( 98, 109, 118, 0.15 );
		}

		span {
			display: block;

			@include breakpoint( '<480px' ) {
				margin: auto 14px;
			}
		}
	}
	&__card-checklist-heading {
		margin-bottom: -16px;
	}
	&__card-boxes.foldable-card {
		&.is-expanded .foldable-card__header {
			padding-bottom: 0;
		}
		.foldable-card {
			@include breakpoint( '<480px' ) {
				&__header {
					min-height: 0;
					padding: 12px 16px;
				}
			}

			&__content {
				border: 0;
			}
		}
	}
	@include breakpoint( '>480px' ) {
		&__card-boxes.card.foldable-card {
			margin-top: 0;
			padding-bottom: 0;

			.foldable-card__header {
				padding: 0 24px;
			}

			.foldable-card__content {
				padding: 0 24px;
			}
		}
	}
	&__boxes {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: stretch;
	}
	&__card-col {
		display: block;

		.button {
			display: block;
			text-align: center;
			width: 100%;
		}

		@mixin card-col-two-col {
			align-items: center;
			display: flex;
			justify-content: space-between;

			.button {
				width: auto;
			}
		}
		@include breakpoint( '>1400px' ) {
			@include card-col-two-col;
		}
		@include breakpoint( '800px-1040px' ) {
			@include card-col-two-col;
		}
	}
	&__card-col-left {
		margin-bottom: 24px;
		width: 100%;

		@mixin card-col-left-two-col {
			margin-bottom: 0;
			width: 50%;

			.button {
				margin-right: 6px;
			}
		}
		@include breakpoint( '>1400px' ) {
			@include card-col-left-two-col;
		}
		@include breakpoint( '800px-1040px' ) {
			@include card-col-left-two-col;
		}
	}
	&__card-col-right {
		width: 100%;

		@mixin card-col-right-two-col {
			width: 50%;

			.button {
				margin-left: 6px;
			}
		}
		@include breakpoint( '>1400px' ) {
			@include card-col-right-two-col;
		}
		@include breakpoint( '800px-1040px' ) {
			@include card-col-right-two-col;
		}
	}
	&__card-support {
		display: flex;
		justify-content: space-between;

		img {
			margin: 0 7% 0 0;
			width: 137px;
			height: 119px;

			@include breakpoint( '>960px' ) {
				display: none;
			}
		}

		.vertical-nav {
			width: 60%;

			@include breakpoint( '>960px' ) {
				width: 100%;
			}
		}
	}

	&__card-subheader {
		color: var( --color-text-subtle );
		font-size: 0.85rem;
		margin: -0.5rem 0 1rem;
	}
	&__grow-earn {
		padding-bottom: 12px;
	}

	&__layout {
		@include grid-row( 3, 1 );
		@include breakpoint( '>1040px' ) {
			@include grid-column( 1, 12 );
			@include display-grid;
			@include grid-template-columns( 12, 24px, 1fr );
			grid-gap: 24px;
		}

		.checklist__tasks {
			margin-bottom: 16px;

			&-completed-title {
				margin-top: 24px;

				@include breakpoint( '480px-660px' ) {
					margin-left: 24px;
				}
			}

			.checklist__task-icon {
				width: 5px;
				height: 5px;
				border-color: var( --color-neutral-20 );
				background: var( --color-surface );
				top: 21px;
				left: 16px;

				@include breakpoint( '>480px' ) {
					left: 24px;
				}
			}

			.checklist__task.is-collapsed .checklist__task-icon {
				border-color: var( --color-neutral-20 );
				background: var( --color-surface );
			}

			.checklist__task.is-completed .checklist__task-icon {
				border-color: var( --color-neutral-10 );
				background: var( --color-neutral-10 );
				top: 15px;
				left: 16px;

				@include breakpoint( '>480px' ) {
					left: 24px;
				}
			}

			.checklist__task.is-completed .gridicons-checkmark {
				display: none;
			}

			.checklist__task::before {
				display: none;
			}
		}
	}
	&__layout-col {
		.card-heading {
			margin-top: -8px;
		}

		a:last-child .vertical-nav-item {
			border-bottom: none;
		}
	}
	&__layout-col-left {
		@include breakpoint( '>1040px' ) {
			@include grid-column( 1, 8 );
		}
	}
	&__layout-col-right {
		.vertical-nav {
			margin-top: 0;
		}

		.vertical-nav-item {
			border-bottom: 1px solid var( --color-neutral-5 );
			box-shadow: none;
			padding: 12px 0;

			.gridicon {
				right: 0;
			}
		}
		@include breakpoint( '>1040px' ) {
			@include grid-column( 9, 4 );
		}
	}

	&__loading-placeholder {
		@include placeholder();
		@include grid-column( 1, 12 );
	}
}
